<template>
  <div class="container">
    <page-header :title="$t('help_feedback')"></page-header>
    <div class="feedback_div">
      <div class="feedback_title">{{ $t("pay_category") }}</div>
      <div class="feedback_select">
        <div
          class="feedback_select_view"
          :class="{ feedback_select_active: item.value == params.type }"
          v-for="item in options"
          :key="item.value"
          @click="changeValue(item.value)"
        >
          <div class="feedback_select_title">{{ item.label }}</div>
          <img
            style="width: 14px; height: 14px;"
            :src="
              item.value == params.type
                ? require('@/assets/img/problem/ic_selected@2x.png')
                : require('@/assets/img/problem/ic_unselected@2x.png')
            "
          />
        </div>
      </div>
      <div class="feedback_input">
        <el-input
          v-model="params.email"
          clearable
          :maxlength="320"
          :placeholder="$t('help_enterEmail')"
        />
      </div>
      <div class="feedback_textarea">
        <el-input
          class="textarea_input"
          type="textarea"
          v-model="params.content"
          :clearable="false"
          :maxlength="300"
          :placeholder="$t('help_inputFBContent')"
          placeholderStyle="color: #aaaaac;font-size: 14px; word-wrap: normal!important;"
        ></el-input>
        <div class="textarea_maxlength" style="margin:3px 0;">
          {{ params.content.length }} / 300
        </div>
        <div class="textarea_img">
          <div class="textarea_img_div">
            <van-uploader
              :after-read="afterRead"
              :before-read="beforeRead"
              accept="image/*"
              v-model="fileList"
              :max-count="3"
              @delete="deleteImg"
            >
              <img
                class="textarea_image"
                style="border:none;margin-right: 0px;"
                src="@/assets/img/problem/Add@2x.png"
              />
            </van-uploader>
          </div>
          <div class="textarea_maxlength">{{ fileList.length }} / 3</div>
        </div>
      </div>
    </div>
    <bottom-button :title="$t('home_submit')" @click="submit"></bottom-button>
  </div>
</template>
<script>
const regEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
import $api from "@/assets/js/api/home";
import share from "@/mixins/share";
export default {
  mixins: [share],
  data() {
    return {
      options: [],
      params: {
        content: "", // 建议内容
        email: "", // 邮箱
        images: "", // 图片url，多个以","分隔
        type: -1 // 反馈类型
      },
      uploadImgs: [], // 传给后台的路径
      fileList: [] // 预览的路径
    };
  },
  created() {
    this.getLang();
    this.options = [
      {
        value: 1,
        label: this.$t("help_funcIssues")
      },
      {
        value: 2,
        label: this.$t("help_suggestion")
      },
      {
        value: 4,
        label: this.$t("help_others2")
      }
    ];
  },
  methods: {
    //限制输入
    onInput(e) {
      // console.log(e)
      const inputNum = e;
      this.$nextTick(() => {
        this.params.email = inputNum.replace(/[^a-zA-Z0-9._%+-@]/g, "");
      });
    },

    //选择类别
    changeValue(val) {
      this.params.type = val;
    },
    isJPG(file) {
      return (
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg"
      );
    },
    //图片上传前限制
    beforeRead(file) {
      if (Array.isArray(file)) {
        for (let index = 0; index < file.length; index++) {
          const element = file[index];
          if (!this.isJPG(element)) {
            this.global.toast(this.$t("Upload_image_type"));
            return false;
          }
        }
      } else {
        if (!this.isJPG(file)) {
          this.global.toast(this.$t("Upload_image_type"));
          return false;
        }
      }

      return true;
    },

    // 将文件上传至服务器
    afterRead(file) {
      // console.log(file);
      let params = new FormData();
      params.append("files", file.file);
      params.append("type", 1);
      $api.uploadImg(params).then(res => {
        if (res.code == 0) {
          this.global.toast(res.message);
          this.uploadImgs.push(res.data.value);
        } else {
          this.global.toast(res.message);
        }
      });
    },

    //删除图片
    deleteImg(file, detail) {
      let params = { file: this.uploadImgs[detail.index] };
      this.uploadImgs.splice(detail.index, 1);
      $api.deldImg(params).then(res => {
        if (res.code == 0) {
          this.global.toast(res.message);
        }
      });
    },

    //提交反馈
    submit() {
      if (this.params.type == -1) {
        this.global.toast(this.$t("toast_selOption"));

        return;
      }
      if (!this.params.email) {
        this.global.toast(this.$t("help_enterEmail"));
        return;
      }
      if (!regEmail.test(this.params.email)) {
        this.global.toast(this.$t("toast_validEmail"));
        return;
      }
      if (!this.params.content) {
        this.global.toast(this.$t("help_inputFBContent"));
        return;
      }
      this.params.images = this.uploadImgs.toString();
      $api.postFeedback(this.params).then(res => {
        if (res.code == 0) {
          this.global.toast(res.message);
          let params = {
            type: 3,
          };
          this.$router.push({
            path: "/problem/result",
            query: {
              params: JSON.stringify(params),
              feebackOrigin: 1 //1 意见反馈
            }
          });
        } else {
          this.global.toast(res.message);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  background: #f5f5f7;
  .feedback_div {
    width: calc(100% - 40px);
    padding: 20px 20px 108px;
    .feedback_title {
      font-size: 17px;
      font-weight: 600;
      text-align: left;
      color: #39404d;
      line-height: 20px;
    }
    .feedback_select {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .feedback_select_view {
        width: calc(50% - 5px);
        background: #f5f5f7;
        border: 1px solid #d2d8e2;
        border-radius: 10px;
        padding: 0 14px;
        height: 48px;
        margin: 10px 10px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        &:nth-of-type(2n) {
          margin-right: 0;
        }
        .feedback_select_title {
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          color: #39404d;
          line-height: 16px;
          margin-right: 12px;
        }
      }
      .feedback_select_active {
        border: 2px solid #E7FF55;
        padding: 0 13px !important;
        background: #ffffff;
        // height: 46px;
      }
    }
    .feedback_input {
      height: 48px;
      background: #ececee;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0 10px 0;
      .el-input__inner {
        height: 48px !important;
        border: none !important;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #39404d;
        line-height: 16px;
        background: #ececee;
      }

      .el-input__inner::placeholder {
        color: #aaaaac;
        font-size: 14px;
        font-weight: 500;
      }
    }
    .feedback_textarea {
      // height: 298px;
      background: #ececee;
      border-radius: 7px;
      background: #ececee;
      border-radius: 7px;
      .el-textarea__inner {
        height: 142px !important;
        border: none !important;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: #39404d;
        line-height: 16px;
        background: #ececee;
        padding: 16px;
      }
      .el-textarea__inner::placeholder {
        color: #aaaaac;
        font-size: 14px;
        font-weight: 500;
      }

      .textarea_maxlength {
        font-size: 12px;
        font-weight: 500;
        text-align: right;
        color: #aaaaac;
        line-height: 14px;
        padding-right: 16px;
      }
      .textarea_img {
        display: flex;
        padding: 16px 0 16px 16px;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        .textarea_img_div {
          .textarea_image {
            width: 72px !important;
            height: 72px !important;
            border-radius: 5px;
          }
          .van-uploader__upload {
            width: 72px !important;
            height: 72px !important;
            margin: 0 !important;
            border-radius: 5px;
            background: #ffffff !important;
            border: 1px solid #dcdfe6;
          }
          .van-uploader__preview {
            width: 72px !important;
            height: 72px !important;
            margin: 0 !important;
            margin-right: 10px !important;
            border-radius: 5px;
          }
          .van-uploader__preview-image {
            width: 72px !important;
            height: 72px !important;
            border-radius: 5px;
          }
          .van-uploader__preview-delete {
            width: 20px !important;
            height: 20px !important;
            border-radius: 0 5px 0 20px !important;
            background: var(--text-color) !important;
          }
          .van-uploader__preview-delete-icon {
            font-size: 20px !important;
          }
          .el-loading-mask {
            background: none !important;
          }
          .el-loading-spinner .path {
            stroke: var(--text-color);
          }
        }
      }
    }
  }
}
</style>
